
<html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>





    <!--jquery-->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <!--用百度的静态资源库的cdn安装bootstrap环境-->
    <!-- Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap.css">
    <link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap-theme.css">


    <!--font-awesome    -->
    <link rel="stylesheet" href="../js/bootstrap/Font-Awesome-3.2.1/css/font-awesome.css">

    <!-- Bootstrap 核心 JavaScript 文件 -->
    <script type="text/javascript" src="../js/bootstrap/bootstrap3/js/bootstrap.js"></script>

    <!-- 引入 bootbox.js -->
    <script src="../js/bootstrap/bootstrap-bootbox/bootbox.js"></script>

    <style type="text/css">
        /*设置背景图片*/
        body {
            background: #f8f6e9;
            background-size:cover;
        }
        /*给表单的边框设置大小,颜色和不透明度*/
        .form {
            background: rgba(255,255,255,0.9);
            width:400px;margin:50px auto;
        }
        /*设置字体和大小*/
        label {
            font-family: Arial;font-size: 15px
        }
        /*当输入正确时,给输入框设置浅绿色*/
        input.form-control:valid{
            background-color: mintcream;
        }
        /*当输入正确时,给输入框设置浅红色*/
        input.form-control:invalid{
            background-color: #ffeeed;
        }
        /*设置图标为行内元素，并设置大小和颜色*/
        .fa{
            display: inline-block;
            top: 27px;
            left: 6px;
            position: relative;
            color: #575757;
        }
        /*为几个输入框设置padding,防止和图标重合*/
        input[type="text"],input[type="password"],input[type="email"]{
            padding-left:26px;
        }
        .form-title{
            padding-top:20px;
        }
        #button{
            padding-bottom: 50px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="form row">
        <form class="form-horizontal col-sm-offset col-md-offset-3" id="myform" method="post">
            <h3 class="form-title">注册</h3>
            <div class="col-sm-9 col-md-9">
                <div class="form-group">
                    <!--        用户名图标和用户名输入框            -->
                    <i class="fa fa-user" aria-hidden="true"></i>
                    <input class="form-control required" type="text" name="username" id="username" placeholder="请输入用户名" required>
                </div>

                <!--        密码图标和密码输入框                -->
                <div class="form-group">
                    <i class="fa fa-key" aria-hidden="true"></i>
                    <input class="form-control required" type="password" name="password" id="password" placeholder="请输入密码" required>
                </div>
                <!--邮箱-->
                <div class="form-group">
                    <i class="fa fa-key" aria-hidden="true"></i>
                    <input class="form-control required" type="text" name="email"  placeholder="请输入邮箱" required>
                </div>

                <!--电话号-->
                <div class="form-group">
                    <i class="fa fa-key" aria-hidden="true"></i>
                    <input class="form-control required" type="text" name="userPhone"  placeholder="请输入手机号" required>
                </div>

                <!--是否为工作人员-->
                <select  class="form-control" name="usertype" id="usertype">
                    <option value="-1">请选择</option>
                    <option value="1">普通用户</option>
                    <option value="2">管理员</option>
                </select>



                <!--注册按钮-->
                <div class="form-group">
                    <input type="submit" value="注册" class="btn btn-success pull-right" onclick="reg()">
                    <input type="button" οnclick="javascrtpt:window.location.href='/login.jsp'"class="btn btn-info pull-left" id="back_btn" value="返回"/>
                </div>


            </div>
        </form>
    </div>
</div>
</body>
<script type="text/javascript">

    //注册
    function reg(){
        //保存数据
        $.ajax({
            url:'/abc/Register',
            type:'post',
            data:$("#myform").serialize(),
            success:function(){
                bootbox.alert({
                    size: "small",
                    title: "提示",
                    message: "新增成功"});
            }
        });
        window.location.href ="/login.html";
    }
</script>
</html>
